<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/easeljs-0.8.2.min.js"></script>
    <title>createJS学习</title>
</head>
<body>
<canvas id="canvas" width="1000"height="500"></canvas>
<script>
    var count=0;
    var canvas = document.querySelector('#canvas');
    //创建舞台
    var stage = new createjs.Stage(canvas);
    //创建一个Shape对象，此处也可以创建文字Text,创建图片Bitmap
    

    stage.addEventListener("stagemousedown",clickCanvas);
    stage.addEventListener("stagemousemove",moveCanvas);
    
    var data = {
        images: ["./image/doge2.jpg"],
        frames: { width: 56, height: 52, regX: 10, regY: 10 }
    }

    var sprite=new createjs.Sprite(new createjs.SpriteSheet(data));
    createjs.Ticker.setFPS(20);

    //添加到舞台  

    
    createjs.Ticker.addEventListener("tick",tick);
    
    function tick(e) {
        var t = stage.getNumChildren();
        for (var i = t-1; i >0; i--) {
            var st = stage.getChildAt(i);

            // 设置单位帧的位置
            st.vY += 2;
            st.vX += 1;
            st.x += st.vX;
            st.y += st.vY;

            // 设置大小变形
            st.scaleX = st.scaleY = st.scaleX + st.vS;
            // 设置透明度
            st.alpha += st.vA;
            if (st.alpha <= 0 || st.y > canvas.height) {
                // 如果超标则移除当前的
                stage.removeChildAt(i);
            }
        }
       
        // 每做一次操作，需要对舞台一次更新
        stage.update(e);
    }


    function clickCanvas(e) {
    // 设置鼠标点击出现的图案多
    addS(Math.random() * 200 + 100, stage.mouseX, stage.mouseY, 2);
    }

    function moveCanvas(e) {
    // 设置鼠标经过出现的图案少
    addS(Math.random() * 2 + 10, stage.mouseX, stage.mouseY, 1);
    }   
    // addS方法中所有小数或者随机数都是可以根据具体需求随意设置的，
    function addS(count,x,y,speed) {
        for (var i = 0; i < count; i++) {
            // 关于sprite.clone方法文档的介绍是，返回的是序列的实例，
            // 所以每个实例对象都可以用这个方法控制
            var sp = sprite.clone();
            // 设置图标出现位置
            sp.x = x;
            sp.y = y;
            // 利用随机数控制图标随机亮度
            sp.alpha = Math.random() * 0.5 + 0.5;
            // 设置大小
            sp.scaleX = sp.scaleY = Math.random() + 0.3;

            // 设置曲线
            var a = Math.PI * 2 * Math.random();

            //设置速度
            var v = (Math.random() - 0.5) * 30 * speed;
            sp.vX = Math.cos(a) * v;
            sp.vY = Math.sin(a) * v;
            sp.vS = (Math.random() - 0.5) * 0.2; // scale
            sp.vA = -Math.random() * 0.05 - 0.01;// alpha
            stage.addChild(sp);
        }
    }
</script>   
</body>
</html>